<template>
	<view class="bannerBox">
		<swiper class="swiper" circular :indicator-dots="dots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="dt in lists" :key="dt.id" @click="goPage(dt)">
				<view class="swiper-item">
					<image class="img" :src="dt.imageUrl" mode="widthFix"></image> 
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {getNewsList} from '@/api/index.js'
	import {setStorage} from "@/utils/common.js"
	export default defineComponent({
		components:{
			
		},
		props:{
			dots:{
				type:Boolean,
				default:true
			},
			autoplay:{
				type:Boolean,
				default:true
			},
			interval:{
				type:Number,
				default:3000
			},
			duration:{
				type:Number,
				default:500
			},
			categoryId:''
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				lists:[]
			})
			
			onMounted(()=>{
				getList()
			})
			
			const getList = async ()=>{
				const res = await getNewsList({
					pageNumber:1,
					pageSize:20,
					publishState:2,
					categoryId:props.categoryId // 广告
				})
				if(res.code !=0) return
				state.lists = res.data.list || []
				if(state.lists.length==0){
					state.lists = [{imageUrl:'/static/images/topbg.jpg'}] // 设置默认大图
					props.autoplay = false
				}
			}
			
			const goPage = (item)=>{
				setStorage('newsDetails',JSON.stringify(item))
				uni.navigateTo({
					url:`/pages/news/details/details?id=${item.id}`
				})
			}
			
			return {
				...toRefs(state),
				goPage
			}
		}
	})
</script>

<style lang="scss">
	.bannerBox{
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background: #eee;
		.swiper{
			width: 100%;
			height: 100%;
			.img{
				display: block;
				width: 100%;
				height: auto;
			}
		}
	}
</style>
